<script setup lang="ts">
import { onBeforeUnmount, onMounted, reactive, ref } from "vue";
import type { GoodDetail, UserAddress } from "@/types/detailTypes/detailTypes.ts";
import City from "@/components/lib/City.vue";

interface Props {
   goodDetail: GoodDetail;
   specsText?:string
}

const props = defineProps<Props>();

/*默认情况如果没有登录则展示默认的收获地址,如果登录了有默认地址则显示登录后的用户地址*/
const locationParams = reactive({
   provinceCode: "110000",
   cityCode: "119900",
   countyCode: "110101",
   fullLocation: "北京市 市辖区 东城区",
});

/*获取用户的默认地址*/
const getUserDefaultAddress = () => {
   if (props.goodDetail.userAddresses) {
      const defaultAddress: UserAddress | null = props.goodDetail.userAddresses.find(item => item.isDefault === 1);
      if (defaultAddress) {
         locationParams.provinceCode = defaultAddress.provinceCode;
         locationParams.cityCode = defaultAddress.cityCode;
         locationParams.countyCode = defaultAddress.countyCode;
         locationParams.fullLocation = defaultAddress.fullLocation;
      }
   }
};

/*城市组件的自定义事件*/
const changeLocationParams = (selectLocationParams: any) => {
   Object.assign(locationParams, selectLocationParams);
};

onMounted(()=>{
   getUserDefaultAddress()
})

</script>

<template>
   <div class="info">
      <p class="g-name">{{ goodDetail.name }}</p>
      <p class="g-desc">{{ goodDetail.desc }}</p>
      <p class="g-price"><span>{{ goodDetail.price }}</span> <span>{{ goodDetail.oldPrice }}</span><i v-if="specsText"> | {{specsText}}</i> </p>
      <div class="g-service">
         <dl>
            <dt>促销</dt>
            <dd>12月好物放送，App领券购买直降120元</dd>
         </dl>
         <dl>
            <dt>配送</dt>
            <dd>至
               <city :fullLocation="locationParams.fullLocation" @change="changeLocationParams"></city>
            </dd>
         </dl>
         <dl>
            <dt>服务</dt>
            <dd><span>无忧退货</span><span>快速退款</span><span>免费包邮</span><a>了解详情</a></dd>
         </dl>

      </div>
   </div>
</template>

<style scoped lang="less">


.info {
   .g-name {
      font-size: 22px
   }

   .g-desc {
      color: #999;
      margin-top: 10px;
   }

   .g-price {
      margin-top: 10px;

      span {
         &::before {
            content: "¥";
            font-size: 14px;
         }

         &:first-child {
            color: @priceColor;
            margin-right: 10px;
            font-size: 22px;
         }

         &:last-child {
            color: #999;
            text-decoration: line-through;
            font-size: 16px;
         }
      }
   }

   .g-service {
      background: #f5f5f5;
      width: 500px;
      padding: 20px 10px 0 10px;
      margin-top: 10px;

      dl {
         padding-bottom: 20px;
         display: flex;
         align-items: center;

         dt {
            width: 50px;
            color: #999;
         }

         dd {
            color: #666;

            &:last-child {
               span {
                  margin-right: 10px;

                  &::before {
                     content: "•";
                     color: @xtxColor;
                     margin-right: 2px;
                  }
               }

               a {
                  color: @xtxColor;
               }
            }
         }
      }
   }
}
</style>
